<template>
  <div>
    <!-- 组件 -->
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="50%"
      @close="close"
    >
      <!-- 对话框内容 -->
      <span style="margin-top: 20px">
        <div style="padding-bottom: 20px; border-bottom: 1px solid #9a9a9a">
          <el-row :gutter="24" style="margin-bottom: 10px">
            <el-col :span="6">
              <span>
                【题型】:
                <span v-if="preList.questionType == 1">单选</span>
                <span v-if="preList.questionType == 2">多选</span>
                <span v-if="preList.questionType == 3">简答</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span> 【编号】: {{ preList.id }} </span>
            </el-col>
            <el-col :span="6">
              <span>
                【难度】:
                <span v-if="preList.difficulty == 1">简单</span>
                <span v-if="preList.difficulty == 2">一般</span>
                <span v-if="preList.difficulty == 3">困难</span>
              </span>
            </el-col>
            <el-col :span="6">
              <span>【标签】:{{ preList.tags }} </span>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <span>【学科】:{{ preList.subjectName }}</span>
            </el-col>
            <el-col :span="6">
              <span>【目录】:{{ preList.directoryName }}</span>
            </el-col>
            <el-col :span="6">
              <span>【方向】:{{ preList.direction }}</span>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px">
          <!-- 题干部分 -->
          <div class="ylzt">【题干】:</div>
          <div class="ylzt" style="color: #4646ff; padding-left: 10px">
            <span v-html="preList.question" />
          </div>
          <!-- 预览-选项 -->
          <div style="padding-left: 10px">
            <!-- 单选预览 -->
            <div>
              <div v-if="preList.questionType == 1" class="ylzt">
                单选题 选项：（以下选中的选项为正确答案）
                <el-radio
                  v-for="(item, index) in preList.options"
                  :key="index"
                  v-model="radio"
                  :label="item.isRight"
                >
                  {{ item.title }}
                </el-radio>
              </div>

              <div v-if="preList.questionType == 2">
                多选题 选项：（以下选中的选项为正确答案）
                <el-checkbox-group v-model="checkList">
                  <el-checkbox
                    v-for="(item, index) in preList.options"
                    :key="index"
                    :label="item.isRight"
                  >
                    {{ item.title }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 多选预览 -->
          </div>
          <!-- 预览 - 参考答案 -->
          <div
            style="
              line-height: 30px;
              margin-top: 15px;
              padding: 10px 0px;
              border-top: 1px solid #9a9a9a;
            "
          >
            <div>
              【参考答案】:<el-button type="danger" style="margin-left: 10px">
                视频答案预览
              </el-button>
            </div>
            <div>
              <video
                :src="preList.videoURL"
                autoplay="autoplay"
                loop="loop"
                muted="muted"
                style="width: 320px; height: 240px; object-fit: fill"
              />
            </div>
          </div>
          <!-- 预览- 答案解析 -->
          <div style="padding: 10px 0px; border-top: 1px solid #9a9a9a">
            【答案解析】:
            <div style="display: inline-block" v-html="preList.answer" />
          </div>
          <!-- 预览 - 题目备注 -->
          <div
            style="
              line-height: 30px;
              padding: 10px 0px;
              border-top: 1px solid #9a9a9a;
            "
          >
            【题目备注】: {{ preList.remarks }}
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeBtn"> 关闭 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRandomsApi } from '@/api/questionBank'
export default {
  props: {
    showDialog: Boolean,
    questionId: [String, Number]
  },
  data() {
    return {
      preList: {
        questionType: null, // 题型
        id: null, // 编号
        difficulty: null, // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        options: [], // 多选题
        answer: '', // 答案解析
        remarks: '' // 题目备注
      },
      radio: 1,
      checkList: [1],
      url: ''
    }
  },
  watch: {
    showDialog: {
      immediate: true,
      async handler(newVal) {
        if (newVal) {
          const { data } = await getRandomsApi(this.questionId)
          console.log(data)
          this.preList = data
        }
      }
    }
  },
  methods: {
    // 关闭弹层的回调  右上角的X号
    close() {
      // 关闭弹层时 清空表单的值
      this.preList = {
        questionType: null, // 题型
        id: null, // 编号
        difficulty: null, // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        options: [], // 多选题
        answer: '', // 答案解析
        remarks: '' // 题目备注
      }
      // 通知父组件重新题库数据  以获得最新的数据
      this.$emit('updataDepart')
      // $emit('update:要修改的父组件数据', 数据的值)
      this.$emit('update:showDialog', false)
    },
    // 右下角的关闭按钮
    closeBtn() {
      this.close()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  background-color: #409eff;
  z-index: inherit;
  color: #fff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-icon-close:hover {
  color: #fff;
}
::v-deep .el-icon-close {
  color: #fff;
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
}

.el-checkbox {
  display: block;
  margin-bottom: 15px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
}

.el-radio {
  display: block;
  margin-bottom: 15px;
}
</style>
